import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload, Form, Input } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState,FC ,useRef, useEffect} from 'react';
import { Button, Modal } from 'antd';
import { info, log } from 'console';

const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
  };
  
  const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  
const Uploader=(props:any)=>{
     
    const [fileList, setFileList] = useState<UploadFile[]>([
        // {
        //   uid: '-1',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
      ]);
    
      const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
        setFileList(newFileList);
        console.log(newFileList)


      };
    //   用这个存图片地址
    const infoRef:any = useRef()
    
    useEffect(()=>{
        infoRef.current= fileList
        let imgUrl
        if(infoRef.current[0] && infoRef.current[0].status === 'done'){
            let  imgUrl = infoRef.current![0].response.imgUrl
            //  imgUrl = infoRef.current!.map((item:any)=>{
            //     return item.response.imgUrl
            // })
            handleImgUrl(imgUrl)
        }
    },[fileList])

    const handleImgUrl = (aaa:any)=>{
        props.onUpload(aaa)
    }

    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();

    // const HandleChange = (info:any) => {
      
    //     if (info.file.status === 'uploading') {
    //         setLoading(true);
    //         return;
    //     }

    //     if (info.file.status === 'done') {
    //         // Get this url from response in real world.
    //         console.log('info', info.file.response)

    //         props.onUpload(info.file.response.headimgurl)

    //         //上传的预览
    //         getBase64(info.file.originFileObj, (url:any) => {
    //             setLoading(false);
    //             setImageUrl(url);
    //         });
    //     }
    // };
    
    //   const onPreview = async (file: UploadFile) => {
    //     let src = file.url as string;
    //     console.log(src)
    //     if (!src) {
    //       src = await new Promise(resolve => {
    //         const reader = new FileReader();
    //         reader.readAsDataURL(file.originFileObj as RcFile);
    //         reader.onload = () => resolve(reader.result as string);
    //       });
    //     }
    //     const image = new Image();
    //     image.src = src;
    //     const imgWindow = window.open(src);
    //     imgWindow?.document.write(image.outerHTML);
    //   };
    return  (
        <Upload
        action="/api/upload/uploadImg"
        listType="picture-card"
        fileList={fileList}
        onChange={onChange}
        name='img'
    >
        { '+ Upload'}
    </Upload>
    )
}
export default Uploader